<template>
  <div class="company-navbar">
    <van-nav-bar title left-arrow @click-left="backNeedPath" ref="vanBar">
      <template #right>
        <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
      </template>
      <template #title>
        <van-search
          placeholder="搜索本公司信息"
          background="transparent"
          shape="round"
          disabled
          @click="toSearch"
        >
          <template #action>
            <div @click="toSearch">搜索</div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell value="公司公告" @click="$router.push(`/notice/${id}`)" />
        <van-cell value="公司介绍" @click="$router.push(`/companyIntroduce/${id}`)" />
        <van-cell :value="companyDetailInfo.isfoll ? '取消关注' : '关注公司'" @click="attention()" />
<!--        <van-cell value="公司二维码" @click="$router.push({
              name: 'guide',
              query: {
                source_type: 'V',
              },
            })" />
        <van-cell value="公司链接" @click="showDig" />-->
        <!--        <van-cell value="投诉建议" @click="toSuggest" />-->
      </van-cell-group>
    </van-overlay>
    <!-- <div :style="{height:height+'px'}"></div> -->
  </div>
</template>
<script>
import {Toast, Dialog} from 'vant'
import {mapGetters} from 'vuex';
import {base_url} from "../constants/comUtils";
import router from "../router";

export default {
  props: ['id', 'companyDetailInfo'],
  data() {
    return {
      base_url,
      showOverlay: false,
      height: 0
    }
  },
  computed: {
    ...mapGetters(['allUserInfo'])
  },
  methods: {
    backNeedPath(){
      if (this.allUserInfo.id){
        this.$router.back();
      } else {
        this.$router.back();
        // this.$router.push('/');
      }
    },
    // 搜索框事件
    toSearch() {
      this.$router.push({
        path: `/search/${this.id}`
      })
    },
    async followCompanys() {
      // eslint-disable-next-line no-unused-vars
      let companyId = {
        company_id: this.id
      }
      // eslint-disable-next-line no-unused-vars
      let res = await this.$api.job.followCompany(companyId)
      Dialog.alert({
        message: res.data
      })
      // toUpdateCompanyDetailInfo
      this.$emit('toUpdateCompanyDetailInfo');
    },
    attention() {
      let allCertificate = window.localStorage.getItem('allCertificate')
      // 有登录凭证才能看到
      if (allCertificate) {
        this.followCompanys();
      } else {
        this.$store.dispatch('logOut')
        Dialog.confirm({
          message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
        })
          .then(() => {
            this.$router.push({
              path: '/login',
              query: {
                // 重定向，便于登录以后直接返回，则才能关注公司
                redirect: this.$router.currentRoute.fullPath
              }
            })
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    // 公司链接toast
    showDig() {
      if (this.allUserInfo.id) {

        const {account, ids, company_id='', p=2 , certification_state, g = 2, company_certification_state}  = this.allUserInfo;

        this.link = this.base_url + '?' + `rpId=${ids}&gId=${company_id}&p=${certification_state}&g=${company_certification_state}&st=V&account=${this.$Base64.encode(account)}`;

        Dialog.confirm({
          title: '温馨提示',
          message: `将我的链接复制、粘贴到手机短信、微信朋友圈、QQ空间等各大社交软件，发送给好友注册下载，推广企业用户赚企业提成，推广个人用户赚代招费。我的链接为：${this.link}`,
          confirmButtonText: '复制链接',
          confirmButtonColor: '#1989FA',
          messageAlign: 'left'
        })
          .then(() => {
            // 点击确定
            this.$copyText(this.link).then(
              () => Toast('复制成功'),
              () => Toast('复制出错')
            )
          })
          .catch(() => {
            // on cancel
          })
      } else {
        let allCertificate = window.localStorage.getItem('allCertificate')
        // 没有登录凭证跳转登录页
        if (!allCertificate) {
          this.$store.dispatch('logOut')
          Dialog.confirm({
            message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
          })
            .then(() => {
              this.$router.push({
                path: '/login'
              })
            })
            .catch(() => {
              // on cancel
            })
        }
      }
    },
    // 投诉建议
    toSuggest() {
      let allCertificate = window.localStorage.getItem('allCertificate')
      // 有登录凭证才能看到
      if (allCertificate) {
        this.$router.push({
          path: '/complaint',
          query: {
            company_id: this.id,
            title: '投诉'
          }
        })
      } else {
        this.$store.dispatch('logOut')
        Dialog.confirm({
          message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
        })
          .then(() => {
            this.$router.push({
              path: '/login'
            })
          })
          .catch(() => {
            // on cancel
          })
      }
    }
  },
  mounted() {
    // this.height=this.$refs.vanBar.$el.offsetHeight
  }
}
</script>

<style lang="scss" scroped>
.company-navbar {
  width: 100%;
}
.over_layer {
  margin-top: 46.6px;
  height: 100%;
  .layer {
    width: 40%;
    font-size: 14px;
    position: absolute;
    right: 0;
    z-index: 2;
  }
}
</style>
